<template>
  <view class="cart-container">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-content">
        <text class="page-title">购物车</text>
        <view class="cart-badge" v-if="cartList.length > 0">
          <text class="badge-count">{{ cartList.length }}</text>
        </view>
      </view>
      <view class="edit-btn" @tap="toggleEditMode" :class="{ active: isEditMode }">
        <uni-icons :type="isEditMode ? 'checkmarkempty' : 'compose'" size="16" color="#fff"></uni-icons>
        <text>{{ isEditMode ? '完成' : '编辑' }}</text>
      </view>
    </view>

    <!-- 购物车列表 -->
    <view v-if="cartList.length > 0" class="cart-content">
      <!-- 商品统计信息 -->
      <view class="cart-summary">
        <view class="summary-item">
          <uni-icons type="shop" size="16" color="#667eea"></uni-icons>
          <text>共 {{ cartList.length }} 件商品</text>
        </view>
        <view class="summary-item" v-if="selectedCount > 0">
          <uni-icons type="heart-filled" size="16" color="#FF6B6B"></uni-icons>
          <text>已选 {{ selectedCount }} 件</text>
        </view>
      </view>

      <view class="cart-list">
        <view 
          class="cart-item" 
          v-for="(item, index) in cartList" 
          :key="index"
          :class="{ 'edit-mode': isEditMode }"
        >
          <!-- 商品选择框 -->
          <view class="item-checkbox" @tap="toggleSelect(index)">
            <view class="checkbox-wrapper">
              <view class="checkbox" :class="{ 'checked': item.selected }">
                <view class="checkbox-inner" v-if="item.selected">
                  <uni-icons type="checkmarkempty" size="14" color="#fff"></uni-icons>
                </view>
              </view>
            </view>
          </view>
          
          <!-- 商品图片 -->
          <view class="item-image-wrapper">
            <image 
              :src="item.image" 
              mode="aspectFill" 
              class="item-image"
              @error="handleImageError($event, index)"
            ></image>
            <view v-if="item.discount" class="discount-badge">
              <text>{{ item.discount }}折</text>
            </view>
            <view v-if="item.freeShipping" class="shipping-badge">
              <uni-icons type="gift" size="12" color="#fff"></uni-icons>
            </view>
          </view>
          
          <!-- 商品信息 -->
          <view class="item-info">
            <text class="item-name">{{ item.name }}</text>
            <view class="item-specs">
              <view class="spec-item">
                <text class="spec-label">规格</text>
                <text class="spec-value">{{ item.spec || '500ml' }}</text>
              </view>
            </view>
            
            <!-- 商品标签 -->
            <view class="item-tags">
              <view v-if="item.freeShipping" class="tag shipping-tag">
                <uni-icons type="gift" size="12" color="#27AE60"></uni-icons>
                <text>包邮</text>
              </view>
              <view v-if="item.authentic" class="tag authentic-tag">
                <uni-icons type="checkmarkempty" size="12" color="#3182CE"></uni-icons>
                <text>正品</text>
              </view>
            </view>
            
            <!-- 价格和操作区域 -->
            <view class="item-bottom">
              <view class="price-section">
                <text class="current-price">¥{{ parseFloat(item.price || 0).toFixed(2) }}</text>
                <text v-if="item.originalPrice" class="original-price">¥{{ parseFloat(item.originalPrice || 0).toFixed(2) }}</text>
              </view>
              
              <!-- 数量控制器 -->
              <view v-if="!isEditMode" class="quantity-controls">
                <view class="quantity-btn decrease" @tap="decreaseQuantity(index)" :class="{ disabled: item.quantity <= 1 }">
                  <uni-icons type="minus" size="12" :color="item.quantity <= 1 ? '#ccc' : '#666'"></uni-icons>
                </view>
                <view class="quantity-display">
                  <text class="quantity-text">{{ item.quantity }}</text>
                </view>
                <view class="quantity-btn increase" @tap="increaseQuantity(index)">
                  <uni-icons type="plus" size="12" color="#666"></uni-icons>
                </view>
              </view>
              
              <!-- 删除按钮 -->
              <view v-else class="delete-action" @tap="removeItem(index)">
                <view class="delete-btn">
                  <uni-icons type="trash" size="16" color="#FF3B30"></uni-icons>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 推荐商品区域 -->
      <view class="recommend-section">
        <view class="section-header">
          <view class="header-left">
            <view class="header-icon">
              <uni-icons type="star-filled" size="16" color="#FFD93D"></uni-icons>
            </view>
            <text class="section-title">猜你喜欢</text>
          </view>
          <view class="header-right">
            <text class="more-text">更多</text>
            <uni-icons type="arrowright" size="14" color="#999"></uni-icons>
          </view>
        </view>
        
        <scroll-view scroll-x="true" class="recommend-scroll" show-scrollbar="false">
          <view class="recommend-list">
            <view 
              class="recommend-item" 
              v-for="(item, index) in recommendList" 
              :key="index"
              @tap="addToCart(item)"
            >
              <image 
                :src="item.image" 
                mode="aspectFill" 
                class="recommend-image"
                @error="handleRecommendImageError($event, index)"
              ></image>
              <view class="recommend-info">
                <text class="recommend-name">{{ item.name }}</text>
                <view class="recommend-bottom">
                  <text class="recommend-price">¥{{ parseFloat(item.price || 0).toFixed(2) }}</text>
                  <view class="quick-add-btn">
                    <uni-icons type="plus" size="12" color="#fff"></uni-icons>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 空购物车状态 -->
    <view v-else class="empty-cart">
      <view class="empty-content">
        <view class="empty-animation">
          <view class="cart-icon">
            <uni-icons type="shop" size="60" color="#E2E8F0"></uni-icons>
          </view>
          <view class="floating-dots">
            <view class="dot dot1"></view>
            <view class="dot dot2"></view>
            <view class="dot dot3"></view>
          </view>
        </view>
        <text class="empty-title">购物车空空如也</text><br>
        <text class="empty-desc">快去挑选心仪的商品吧</text>
        <button class="go-shopping-btn" @tap="goShopping">
          <uni-icons type="home" size="16" color="#fff"></uni-icons>
          <text>立即购物</text>
        </button>
      </view>
    </view>

    <!-- 底部结算栏 -->
    <view v-if="cartList.length > 0" class="bottom-checkout">
      <view class="checkout-content">
        <!-- 全选 -->
        <view class="select-all-section" @tap="toggleSelectAll">
          <view class="select-all-checkbox">
            <view class="checkbox" :class="{ 'checked': isAllSelected }">
              <view class="checkbox-inner" v-if="isAllSelected">
                <uni-icons type="checkmarkempty" size="14" color="#fff"></uni-icons>
              </view>
            </view>
          </view>
          <text class="select-all-text">全选</text>
        </view>
        
        <!-- 价格信息 -->
        <view class="price-info">
          <view class="price-row">
            <text class="price-label">合计：</text>
            <text class="total-price">¥{{ parseFloat(totalPrice || 0).toFixed(2) }}</text>
          </view>
          <view v-if="totalDiscount > 0" class="discount-row">
            <text class="discount-text">已优惠 ¥{{ parseFloat(totalDiscount || 0).toFixed(2) }}</text>
          </view>
        </view>
        
        <!-- 结算按钮 -->
        <button 
          v-if="!isEditMode"
          class="checkout-button" 
          :class="{ 'disabled': selectedCount === 0 }"
          @tap="checkout"
          :disabled="selectedCount === 0"
        >
          <view class="button-content">
            <text class="button-text">结算</text>
            <text v-if="selectedCount > 0" class="item-count">({{ selectedCount }})</text>
          </view>
        </button>
        
        <!-- 删除按钮（编辑模式） -->
        <button 
          v-else
          class="delete-button" 
          :class="{ 'disabled': selectedCount === 0 }"
          @tap="removeSelectedItems"
          :disabled="selectedCount === 0"
        >
          <view class="button-content">
            <uni-icons type="trash" size="16" color="#fff"></uni-icons>
            <text class="button-text">删除</text>
            <text v-if="selectedCount > 0" class="item-count">({{ selectedCount }})</text>
          </view>
        </button>
      </view>
    </view>

    <!-- 底部安全区域 -->
    <!-- <view class="bottom-safe-area"></view> -->
  </view>
</template>

<script>
import { getCartList } from '@/api/order/cart'
const { deleteCartItems } = require('@/api/order/cart')

export default {
  data() {
    return {
      cartList: [], // 购物车商品列表，确保初始化为数组
      cartSummary: {}, // 购物车汇总信息
      isEditMode: false,
      recommendList: [
        {
          id: 1,
          name: '草甘膦除草剂',
          price: 28.90,
          originalPrice: 35.00,
          image: '/static/logo.jpg',
          sales: 1580,
          tags: ['包邮', '正品']
        },
        {
          id: 2,
          name: '复合肥料',
          price: 156.00,
          originalPrice: 180.00,
          image: '/static/logo.jpg',
          sales: 890,
          tags: ['包邮', '热销']
        }
      ]
    }
  },

  onLoad() {
    this.getCartList()
  },
  
  computed: {
    // 是否全选
    isAllSelected() {
      // 确保cartList是数组且不为空
      return Array.isArray(this.cartList) && this.cartList.length > 0 && this.cartList.every(item => item.selected)
    },

    // 选中商品数量
    selectedCount() {
      if (this.cartSummary && this.cartSummary.selected_items) {
        return this.cartSummary.selected_items
      }
      // 如果没有summary数据，手动计算
      if (Array.isArray(this.cartList)) {
        return this.cartList.filter(item => item.selected).length
      }
      return 0
    },

    // 总价
    totalPrice() {
      if (this.cartSummary && this.cartSummary.selected_total) {
        return this.cartSummary.selected_total.toFixed(2)
      }
      // 如果没有summary数据，手动计算
      if (Array.isArray(this.cartList)) {
        return this.cartList
          .filter(item => item.selected)
          .reduce((total, item) => total + (item.price * item.quantity), 0)
          .toFixed(2)
      }
      return '0.00'
    },

    // 总优惠金额
    totalDiscount() {
      // 确保cartList是数组
      if (!Array.isArray(this.cartList)) {
        return '0.00'
      }
      return this.cartList
        .filter(item => item.selected && item.originalPrice)
        .reduce((total, item) => total + (item.originalPrice - item.price) * item.quantity, 0)
        .toFixed(2)
    }
  },

  methods: {
    // 购物车列表
    async getCartList() {
      const res = await getCartList()
      
      // 正确解析API返回的数据结构
      if (res && res.data && res.data.data) {
        const items = res.data.data.items || []
        // 为每个商品添加selected字段（如果不存在）
        this.cartList = items.map(item => {
          // 确保数值类型正确，但保持ID为原始类型
          const price = parseFloat(item.goods_price || item.price || 0)
          const quantity = parseInt(item.quantity || 1)
          const id = item.cart_id || item.id || item.goods_id // 保持原始类型
          
          return {
            ...item,
            selected: item.selected !== undefined ? item.selected : true, // 默认选中
            // 统一字段名，确保兼容性和数据类型
            id: id,
            name: item.goods_name || item.name || '未知商品',
            price: price,
            image: item.img_url || item.goods_image || item.image || '/static/logo.jpg',
            spec: item.spec_name || item.spec || '默认规格',
            quantity: quantity
          }
        })
        // 如果有summary数据也可以使用
        if (res.data.data.summary) {
          this.cartSummary = res.data.data.summary
        }
      } else {
        this.cartList = []
      }
    },

    // 切换编辑模式
    toggleEditMode() {
      this.isEditMode = !this.isEditMode
      
      // 添加触觉反馈
      uni.vibrateShort({
        type: 'light'
      })
    },

    // 切换单个商品选中状态
    toggleSelect(index) {
      if (!Array.isArray(this.cartList) || !this.cartList[index]) {
        return
      }
      
      // 使用Vue的响应式更新方式
      this.$set(this.cartList[index], 'selected', !this.cartList[index].selected)
      // 添加触觉反馈
      uni.vibrateShort({
        type: 'light'
      })
    },

    // 全选/取消全选
    toggleSelectAll() {
      if (!Array.isArray(this.cartList)) {
        return
      }
      const selectAll = !this.isAllSelected
      this.cartList.forEach(item => {
        item.selected = selectAll
      })
      
      // 添加触觉反馈
      uni.vibrateShort({
        type: 'medium'
      })
    },

    // 增加数量
    increaseQuantity(index) {
      if (!Array.isArray(this.cartList) || !this.cartList[index]) {
        return
      }
      this.cartList[index].quantity++
      
      // 添加触觉反馈
      uni.vibrateShort({
        type: 'light'
      })
    },

    // 减少数量
    decreaseQuantity(index) {
      if (!Array.isArray(this.cartList) || !this.cartList[index]) {
        return
      }
      if (this.cartList[index].quantity > 1) {
        this.cartList[index].quantity--
        
        // 添加触觉反馈
        uni.vibrateShort({
          type: 'light'
        })
      }
    },

    // 删除商品
    async removeItem(index) {
      if (!Array.isArray(this.cartList) || !this.cartList[index]) {
        return
      }
      
      const item = this.cartList[index]
      
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个商品吗？',
        confirmColor: '#FF3B30',
        success: async (res) => {
          if (res.confirm) {
            try {
              // 调用API删除商品
              const { deleteCartItems } = require('@/api/order/cart')
              const cartId = item.cart_id || item.id
              
              if (cartId) {
                await deleteCartItems([cartId])
              }
              
              // 从本地列表中删除
              this.cartList.splice(index, 1)
              
              uni.showToast({
                title: '删除成功',
                icon: 'success',
                duration: 1500
              })
              
              // 添加触觉反馈
              uni.vibrateShort({
                type: 'heavy'
              })
              
            } catch (error) {
              // API调用失败时，仍然从本地删除
              this.cartList.splice(index, 1)
              
              uni.showToast({
                title: '删除成功',
                icon: 'success',
                duration: 1500
              })
              
              uni.vibrateShort({
                type: 'heavy'
              })
            }
          }
        }
      })
    },

    // 添加推荐商品到购物车
    addToCart(item) {
      if (!Array.isArray(this.cartList)) {
        this.cartList = []
      }
      const existItem = this.cartList.find(cartItem => cartItem.id === item.id)
      if (existItem) {
        existItem.quantity++
        uni.showToast({
          title: '已增加数量',
          icon: 'success',
          duration: 1500
        })
      } else {
        this.cartList.push({
          ...item,
          quantity: 1,
          selected: true,
          spec: '500ml',
          freeShipping: true,
          authentic: true
        })
        uni.showToast({
          title: '添加成功',
          icon: 'success',
          duration: 1500
        })
      }
      
      // 添加触觉反馈
      uni.vibrateShort({
        type: 'medium'
      })
    },

    // 去购物
    goShopping() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },

    // 处理图片加载错误
    handleImageError(event, index) {
      // 设置默认图片
      if (Array.isArray(this.cartList) && this.cartList[index]) {
        this.$set(this.cartList[index], 'image', '/static/logo.jpg')
      }
    },

    // 处理推荐商品图片加载错误
    handleRecommendImageError(event, index) {
      // 设置默认图片
      if (Array.isArray(this.recommendList) && this.recommendList[index]) {
        this.$set(this.recommendList[index], 'image', '/static/logo.jpg')
      }
    },

    // 结算
    checkout() {
      if (this.selectedCount === 0) {
        uni.showToast({
          title: '请选择要结算的商品',
          icon: 'none',
          duration: 2000
        })
        return
      }

      if (!Array.isArray(this.cartList)) {
        uni.showToast({
          title: '购物车数据异常，请刷新页面',
          icon: 'none',
          duration: 2000
        })
        return
      }

      const selectedItems = this.cartList.filter(item => item.selected)
      
      // 构建购物车商品数据，统一格式并确保数据类型正确
      const goodsData = selectedItems.map((item, index) => {
        // 确保所有数值都是有效的数字类型
        const price = parseFloat(item.price) || 0.0
        const quantity = parseInt(item.quantity) || 1
        // 修复ID处理逻辑，允许字符串ID或使用索引作为备用ID
        const id = item.id || item.cart_id || item.goods_id || (index + 1)
        
        if (price <= 0) {
          throw new Error(`商品"${item.name}"价格异常: ${price}`)
        }
        
        if (quantity <= 0) {
          throw new Error(`商品"${item.name}"数量异常: ${quantity}`)
        }
        
        return {
          id: id,
          goodsId: id,
          specId: item.specId || 'default',
          name: item.name || '未知商品',
          specName: item.spec || '默认规格',
          spec: item.spec || '默认规格',
          quantity: quantity,
          price: price,
          image: item.image || '/static/logo.jpg',
          badge: item.discount ? `${item.discount}折` : null
        }
      })
      
      // 统一跳转到checkout页面
      uni.navigateTo({
        url: `/pages/order/checkout?type=cart&goodsData=${encodeURIComponent(JSON.stringify(goodsData))}`
      })
    },

    // 批量删除选中商品
    async removeSelectedItems() {
      if (!Array.isArray(this.cartList)) {
        return
      }
      
      const selectedItems = this.cartList.filter(item => item.selected)
      
      if (selectedItems.length === 0) {
        uni.showToast({
          title: '请选择要删除的商品',
          icon: 'none',
          duration: 2000
        })
        return
      }
      
      uni.showModal({
        title: '确认删除',
        content: `确定要删除选中的${selectedItems.length}个商品吗？`,
        confirmColor: '#FF3B30',
        success: async (res) => {
          if (res.confirm) {
            try {
              // 调用API批量删除商品
              const { deleteCartItems } = require('@/api/order/cart')
              const cartIds = selectedItems.map(item => item.cart_id || item.id).filter(id => id)
              
              if (cartIds.length > 0) {
                await deleteCartItems(cartIds)
              }
              
              // 从本地列表中删除选中商品
              this.cartList = this.cartList.filter(item => !item.selected)
              
              uni.showToast({
                title: `成功删除${selectedItems.length}个商品`,
                icon: 'success',
                duration: 1500
              })
              
              // 如果购物车为空，退出编辑模式
              if (this.cartList.length === 0) {
                this.isEditMode = false
              }
              
              uni.vibrateShort({
                type: 'heavy'
              })
              
            } catch (error) {
              // API调用失败时，仍然从本地删除
              this.cartList = this.cartList.filter(item => !item.selected)
              
              uni.showToast({
                title: `成功删除${selectedItems.length}个商品`,
                icon: 'success',
                duration: 1500
              })
              
              if (this.cartList.length === 0) {
                this.isEditMode = false
              }
              
              uni.vibrateShort({
                type: 'heavy'
              })
            }
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
// 全局变量
$primary-color: #667eea;
$primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
$success-color: #27AE60;
$error-color: #FF3B30;
$warning-color: #FFD93D;
$text-primary: #2D3748;
$text-secondary: #718096;
$text-muted: #A0AEC0;
$bg-primary: #FFFFFF;
$bg-secondary: #F8FAFC;
$bg-light: #EDF2F7;
$border-color: #E2E8F0;
$shadow-light: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
$shadow-medium: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
$shadow-heavy: 0 8rpx 40rpx rgba(0, 0, 0, 0.12);
$radius-small: 12rpx;
$radius-medium: 16rpx;
$radius-large: 24rpx;
$radius-round: 50rpx;

.cart-container {
  min-height: 100vh;
  background: linear-gradient(180deg, $bg-secondary 0%, $bg-light 100%);
  padding-bottom: 200rpx;
}

// 页面头部优化
.page-header {
  background: $bg-primary;
  padding: 30rpx;
  box-shadow: $shadow-light;
  border-bottom: 1rpx solid $border-color;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-content {
  display: flex;
  align-items: center;
  position: relative;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: $text-primary;
}

.cart-badge {
  position: absolute;
  top: -8rpx;
  right: -24rpx;
  background: $primary-gradient;
  border-radius: 20rpx;
  min-width: 32rpx;
  height: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
}

.badge-count {
  color: #fff;
  font-size: 20rpx;
  font-weight: bold;
  padding: 0 8rpx;
}

.edit-btn {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  background: $primary-gradient;
  color: #fff;
  border-radius: $radius-round;
  font-size: 26rpx;
  font-weight: 500;
  box-shadow: 0 4rpx 15rpx rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
  
  text {
    margin-left: 8rpx;
  }
  
  &.active {
    background: linear-gradient(135deg, $success-color, #20B2AA);
    box-shadow: 0 4rpx 15rpx rgba(39, 174, 96, 0.3);
  }
}

// 购物车内容区域
.cart-content {
  padding: 20rpx 0;
}

// 商品统计信息
.cart-summary {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background: $bg-primary;
  margin: 0 20rpx 20rpx;
  border-radius: $radius-medium;
  box-shadow: $shadow-light;
}

.summary-item {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: $text-secondary;
  
  text {
    margin-left: 8rpx;
  }
}

// 购物车列表
.cart-list {
  padding: 0 20rpx;
}

.cart-item {
  display: flex;
  background: $bg-primary;
  border-radius: $radius-large;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: $shadow-medium;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  
  &.edit-mode {
    transform: translateX(-8rpx);
    box-shadow: $shadow-heavy;
  }
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4rpx;
    height: 100%;
    background: $primary-gradient;
    transform: scaleY(0);
    transition: transform 0.3s ease;
  }
  
  &:hover::before {
    transform: scaleY(1);
  }
}

// 选择框优化
.item-checkbox {
  margin-right: 20rpx;
  display: flex;
  align-items: flex-start;
  padding-top: 15rpx;
}

.checkbox-wrapper {
  position: relative;
}

.checkbox {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid $border-color;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  
  &.checked {
    background: $primary-gradient;
    border-color: $primary-color;
    transform: scale(1.1);
    
    .checkbox-inner {
      animation: checkmark 0.3s ease-in-out;
    }
  }
}

@keyframes checkmark {
  0% {
    transform: scale(0) rotate(-45deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(-45deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

// 商品图片区域
.item-image-wrapper {
  position: relative;
  margin-right: 20rpx;
}

.item-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: $radius-medium;
  box-shadow: $shadow-light;
}

.discount-badge {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  background: linear-gradient(135deg, #FF6B6B, #FF5252);
  color: #fff;
  font-size: 20rpx;
  padding: 6rpx 10rpx;
  border-radius: $radius-small;
  font-weight: bold;
  box-shadow: 0 2rpx 8rpx rgba(255, 107, 107, 0.3);
}

.shipping-badge {
  position: absolute;
  bottom: 8rpx;
  right: 8rpx;
  background: $primary-gradient;
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
}

// 商品信息区域
.item-info {
  flex: 1;
}

.item-name {
  font-size: 28rpx;
  color: $text-primary;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 12rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.item-specs {
  margin-bottom: 12rpx;
}

.spec-item {
  display: flex;
  align-items: center;
  margin-bottom: 6rpx;
}

.spec-label {
  font-size: 22rpx;
  color: $text-muted;
  margin-right: 12rpx;
  min-width: 60rpx;
}

.spec-value {
  font-size: 22rpx;
  color: $text-secondary;
  background: $bg-light;
  padding: 4rpx 12rpx;
  border-radius: $radius-small;
}

// 商品标签
.item-tags {
  display: flex;
  gap: 8rpx;
  margin-bottom: 16rpx;
}

.tag {
  display: flex;
  align-items: center;
  font-size: 20rpx;
  padding: 6rpx 10rpx;
  border-radius: $radius-small;
  font-weight: 500;
  
  text {
    margin-left: 4rpx;
  }
}

.shipping-tag {
  background: rgba(39, 174, 96, 0.1);
  color: $success-color;
}

.authentic-tag {
  background: rgba(49, 130, 206, 0.1);
  color: #3182CE;
}

// 商品底部信息
.item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price-section {
  display: flex;
  align-items: baseline;
  gap: 8rpx;
}

.current-price {
  font-size: 32rpx;
  color: $error-color;
  font-weight: bold;
}

.original-price {
  font-size: 24rpx;
  color: $text-muted;
  text-decoration: line-through;
}

// 数量控制器优化
.quantity-controls {
  display: flex;
  align-items: center;
  background: $bg-light;
  border-radius: $radius-round;
  overflow: hidden;
  box-shadow: $shadow-light;
}

.quantity-btn {
  width: 56rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $bg-primary;
  transition: all 0.2s ease;
  
  &:active {
    background: $bg-light;
    transform: scale(0.95);
  }
  
  &.disabled {
    opacity: 0.5;
  }
  
  &.decrease {
    border-top-left-radius: $radius-round;
    border-bottom-left-radius: $radius-round;
  }
  
  &.increase {
    border-top-right-radius: $radius-round;
    border-bottom-right-radius: $radius-round;
  }
}

.quantity-display {
  min-width: 60rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $bg-primary;
}

.quantity-text {
  font-size: 28rpx;
  color: $text-primary;
  font-weight: 500;
}

// 删除操作
.delete-action {
  display: flex;
  align-items: center;
}

.delete-btn {
  padding: 16rpx;
  border-radius: 50%;
  background: rgba(255, 59, 48, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  
  &:active {
    transform: scale(0.9);
    background: rgba(255, 59, 48, 0.2);
  }
}

// 推荐商品区域优化
.recommend-section {
  margin-top: 30rpx;
  background: $bg-primary;
  border-radius: $radius-large $radius-large 0 0;
  overflow: hidden;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid $border-color;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-icon {
  margin-right: 12rpx;
}

.section-title {
  font-size: 30rpx;
  font-weight: bold;
  color: $text-primary;
}

.header-right {
  display: flex;
  align-items: center;
}

.more-text {
  font-size: 24rpx;
  color: $text-secondary;
  margin-right: 8rpx;
}

.recommend-scroll {
  padding: 20rpx 0;
}

.recommend-list {
  display: flex;
  padding: 0 30rpx;
  gap: 20rpx;
}

.recommend-item {
  min-width: 200rpx;
  background: $bg-secondary;
  border-radius: $radius-medium;
  overflow: hidden;
  box-shadow: $shadow-light;
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.95);
    box-shadow: $shadow-medium;
  }
}

.recommend-image {
  width: 200rpx;
  height: 140rpx;
}

.recommend-info {
  padding: 20rpx;
}

.recommend-name {
  font-size: 24rpx;
  color: $text-primary;
  line-height: 1.3;
  margin-bottom: 12rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-weight: 500;
}

.recommend-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recommend-price {
  font-size: 26rpx;
  color: $error-color;
  font-weight: bold;
}

.quick-add-btn {
  width: 40rpx;
  height: 40rpx;
  background: $primary-gradient;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
  transition: all 0.2s ease;
  
  &:active {
    transform: scale(0.9);
  }
}

// 空购物车状态优化
.empty-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: 60rpx 40rpx;
}

.empty-content {
  text-align: center;
}

.empty-animation {
  position: relative;
  margin-bottom: 40rpx;
  display: flex;
  justify-content: center;
}

.cart-icon {
  position: relative;
  z-index: 2;
}

.floating-dots {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dot {
  position: absolute;
  width: 12rpx;
  height: 12rpx;
  background: $primary-color;
  border-radius: 50%;
  opacity: 0.6;
  
  &.dot1 {
    top: -40rpx;
    left: -30rpx;
    animation: float1 3s ease-in-out infinite;
  }
  
  &.dot2 {
    top: -20rpx;
    right: -40rpx;
    animation: float2 3s ease-in-out infinite 1s;
  }
  
  &.dot3 {
    bottom: -30rpx;
    left: -20rpx;
    animation: float3 3s ease-in-out infinite 2s;
  }
}

@keyframes float1 {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
  50% { transform: translateY(-20rpx) scale(1.2); opacity: 1; }
}

@keyframes float2 {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
  50% { transform: translateY(-15rpx) scale(1.1); opacity: 1; }
}

@keyframes float3 {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
  50% { transform: translateY(-25rpx) scale(1.3); opacity: 1; }
}

.empty-title {
  font-size: 32rpx;
  color: $text-primary;
  margin-bottom: 16rpx;
  font-weight: 600;
}

.empty-desc {
  font-size: 26rpx;
  color: $text-secondary;
  margin-bottom: 60rpx;
}

.go-shopping-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24rpx 48rpx;
  background: $primary-gradient;
  color: #fff;
  border-radius: $radius-round;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  box-shadow: 0 8rpx 25rpx rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
  
  text {
    margin-left: 8rpx;
  }
  
  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 4rpx 15rpx rgba(102, 126, 234, 0.3);
  }
}

// 底部结算栏优化
.bottom-checkout {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: $bg-primary;
  box-shadow: 0 -8rpx 40rpx rgba(0, 0, 0, 0.12);
  z-index: 1000;
  border-top: 1rpx solid $border-color;
}

.checkout-content {
  display: flex;
  align-items: center;
  padding: 24rpx 30rpx;
  gap: 20rpx;
}

.select-all-section {
  display: flex;
  align-items: center;
}

.select-all-checkbox {
  margin-right: 12rpx;
}

.select-all-text {
  font-size: 28rpx;
  color: $text-primary;
  font-weight: 500;
}

.price-info {
  flex: 1;
  text-align: right;
}

.price-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  margin-bottom: 4rpx;
}

.price-label {
  font-size: 26rpx;
  color: $text-secondary;
  margin-right: 8rpx;
}

.total-price {
  font-size: 36rpx;
  color: $error-color;
  font-weight: bold;
}

.discount-row {
  display: flex;
  justify-content: flex-end;
}

.discount-text {
  font-size: 22rpx;
  color: $success-color;
}

.checkout-button {
  padding: 24rpx 40rpx;
  background: $primary-gradient;
  color: #fff;
  border-radius: $radius-round;
  font-size: 28rpx;
  font-weight: 600;
  border: none;
  box-shadow: 0 4rpx 15rpx rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
  min-width: 200rpx;
  
  &.disabled {
    background: $bg-light;
    color: $text-muted;
    box-shadow: none;
  }
  
  &:not(.disabled):active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.3);
  }
}

.delete-button {
  padding: 24rpx 40rpx;
  background: linear-gradient(135deg, $error-color, #E53E3E);
  color: #fff;
  border-radius: $radius-round;
  font-size: 28rpx;
  font-weight: 600;
  border: none;
  box-shadow: 0 4rpx 15rpx rgba(255, 59, 48, 0.3);
  transition: all 0.3s ease;
  min-width: 200rpx;
  
  &.disabled {
    background: $bg-light;
    color: $text-muted;
    box-shadow: none;
  }
  
  &:not(.disabled):active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 8rpx rgba(255, 59, 48, 0.3);
  }
}

.button-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button-text {
  font-size: 28rpx;
}

.item-count {
  margin-left: 8rpx;
  font-size: 24rpx;
  opacity: 0.9;
}

.bottom-safe-area {
  height: env(safe-area-inset-bottom);
  height: constant(safe-area-inset-bottom);
  background: $bg-primary;
}

// 禁用按钮默认样式
.checkout-button::after {
  border: none;
}

.delete-button::after {
  border: none;
}

.go-shopping-btn::after {
  border: none;
}

.edit-btn::after {
  border: none;
}
</style>